import Vue from 'vue'
import App from './App.vue' // 入口组件
import { createStore } from './store' // 创建store实例的方法
import { createRouter } from './router' // 创建router实例的方法
import { sync } from 'vuex-router-sync' // 用来让store和router同步的插件
import titleMixin from './util/title' // 给路由组件混入created钩子，用来设置title（context.title）
import * as filters from './util/filters' // 定义全局过滤器

// mixin for handling title
Vue.mixin(titleMixin)

// register global utility filters.
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

// Expose a factory function that creates a fresh set of store, router,
// app instances on each call (which is called for each SSR request)
export function createApp () {
  // create store and router instances
  const store = createStore()
  const router = createRouter()

  // sync the router with the vuex store.
  // this registers `store.state.route`
  // 之后可以在state中访问到当前路由对象route(在store的getters中有实践)
  sync(store, router)

  // create the app instance.
  // here we inject the router, store and ssr context to all child components,
  // making them available everywhere as `this.$router` and `this.$store`.
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  })

  // expose the app, the router and the store.
  // note we are not mounting the app here, since bootstrapping will be
  // different depending on whether we are in a browser or on the server.
  return { app, router, store }
}
